import React from 'react';
import { Popover } from 'antd';
import { WeaTools } from 'ecCom';
import './index.less';

class WeaPortalQuickSearch extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      types: [],
      selected: {},
    };
  }

  componentWillMount() {
    WeaTools.callApi('/api/portal/quickSearch/getQuickSearchTypes', 'GET').then((result) => {
      const { data = [] } = result;
      this.setState({
        types: data,
        selected: data[0] || {},
      });
    });
  }

  render() {
    const { className = '', overlayClassName = '', placeholder = '' } = this.props;
    const { visible, types, selected } = this.state;

    const content = (
      <div className="wea-portal-qs-types">
        {types.map((item, index) => {
          const { type, name, icon } = item;

          let Icon = null;
          if (icon) {
            if (type == 10) {
              Icon = <img src={icon} alt="" />;
            } else {
              Icon = <i className={`wea-portal-qs-types-icon ${icon}`} />;
            }
          } else {
            Icon = <i className={'wea-portal-qs-types-icon icon-portal-content'} />;
          }

          return (
            <div key={index} className="wea-portal-qs-types-item" title={name} onClick={() => this.onSelectedChange(item)}>
              {Icon}
              <span>{name}</span>
            </div>
          );
        })}
      </div>
    );

    return (
      <div className={`wea-portal-qs ${className}`}>
        <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@m1d1p7`} trigger="click" placement="bottomLeft" content={content} overlayClassName={`wea-portal-qs-overlay ${overlayClassName}`} visible={visible} onVisibleChange={this.onVisibleChange}>
          <div className="wea-portal-qs-type">
            <span className="wea-portal-qs-type-name" title={selected.name}>
              {selected.name}
            </span>
            <span className="wea-portal-qs-type-icon">
              <i className="icon-coms-down2" />
            </span>
          </div>
        </Popover>
        <div className="wea-portal-qs-divider" />
        <div className="wea-portal-qs-content">
          <input ref={input => (this.input = input)} placeholder={placeholder} onKeyDown={this.onKeyDown} />
        </div>
        <div className="wea-portal-qs-search-icon" onClick={this.onSearch}>
          <i className="icon-coms-search" />
        </div>
      </div>
    );
  }

  onVisibleChange = (visible) => {
    this.setState({ visible });
  };

  onSelectedChange = (selected) => {
    this.setState({ visible: false, selected });
  };

  onKeyDown = (e) => {
    if (e.keyCode == 13) {
      this.onSearch();
    }
  };

  onSearch = () => {
    const { selected } = this.state;
    const url = selected.url + encodeURIComponent(this.input.value);
    if (this.props.onOpen) {
      this.props.onOpen({ url });
    } else {
      window.open(url);
    }
  };
}

export default WeaPortalQuickSearch;
